<ion-view view-title="{{viewTitle}}">
    <ion-content scroll="false">
        <!--
            align-title: left/center/right. 控制其下级含有 .title 样式的元素的 text-align
            no-tap-scroll: 设置为 false 时表示 点击了 header bar 时会自动回到 content 的顶部, true 时禁用.
        -->
        <ion-header-bar align-title="center" no-tap-scroll="false" class="bar-positive">
            <div class="buttons">
                <button class="button">Left Button</button>
            </div>
            <!-- 必须添加 .title 样式 -->
            <h1 class="title">Header Bar</h1>
            <div class="buttons">
                <button class="button">Right Button</button>
            </div>
        </ion-header-bar>
        <ion-content>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
        </ion-content>
        <ion-footer-bar align-title="center" class="bar-assertive">
            <div class="buttons">
                <button class="button">Left Button</button>
            </div>
            <h1 class="title">Footer Bar</h1>
            <div class="buttons">
                <button class="button">Right Button</button>
            </div>
        </ion-footer-bar>
    </ion-content>
</ion-view>